<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="header">
      <div class="searchBox">
        <el-input placeholder="请输入内容" v-model="searchValue" class="searchInput" @input="changeSearchValue"
          @keyup.enter.native="getList1">

          <el-select v-model="selectValue" slot="prepend" placeholder="请选择" class="selectType" @change="changeSelect">
            <el-option v-for="item in searchArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button slot="append" class="searchBtn" @click="getList1">搜索</el-button>
        </el-input>
        <div class="zankai" @click="changeUnfold()">
          {{ isUnfold ? "收起" : "展开"
          }}<i class="el-icon-arrow-up" style="margin-left: 4px" :class="{ UnfoldActive: !isUnfold }"></i>
        </div>
      </div>

      <div class="zankai_area" v-show="isUnfold == true">
        <el-row>
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">货源方</div>
              <input type="text" v-model="ownerName" class="input" placeholder="请输入关键字" @keyup.enter="getList1()" />
            </div>
          </el-col>

          <el-col :span="8">
            <div class="inputBox">
              <div class="label">项目名称</div>
              <input type="text" v-model="projectName" class="input" placeholder="请输入关键字" @keyup.enter="getList1()" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">车队名称</div>
              <input type="text" v-model="fleetName" class="input" placeholder="请输入关键字" @keyup.enter="getList1()" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">供应商名称</div>
              <input type="text" v-model="supplierName" class="input" placeholder="请输入关键字" @keyup.enter="getList1()" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">订单状态</div>
              <el-select v-model="orderStatus" placeholder="请选择" class="orderSelector">
                <el-option v-for="item in orderStateArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="inputBox" style="display: flex">
              <div class="label" style="width: 80px">创建时间</div>
              <el-date-picker value-format="yyyy-MM-dd" v-model="createTime" type="daterange" align="right" unlink-panels
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 24px; margin-bottom: 21px"
              @click="getList1()">搜索</el-button>
            <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="clearUp">清空</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="main">
      <div class="main_head">
        <div class="main_head_left">
          已选择<span style="color: #1890ff">{{ selectionLegth }}</span>项
        </div>
        <div class="main_head_right">
          <button class="addCargoOwner" v-if="permissions.assistOrderList.perms != null"
            @click="$router.push('/supplierManagement/selfCreatedOrder')">
            创建订单
          </button>
          <button class="addCargoOwner" @click="publish" v-if="permissions.releaseOrder.perms != null">一键发布</button>
          <el-select class="selector" v-model="operateValue" placeholder="批量操作" size="small" @change="BatchOperation">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="list">
        <el-table :data="records" style="width: 100%" @selection-change="handleSelectionChange" header-align="left" 
          ref="registTable">
          <el-table-column align="left" type="selection" width="50"></el-table-column>
          <el-table-column align="left" prop="SerialNumber" width="70px" label="序号">
          </el-table-column>
          <el-table-column align="left" prop="orderStatusStr" label="订单状态" width="100px">
            <template slot-scope="scope">
              <!-- NEW( code: 1， info:"新订单") -->
              <div class="tag gery" v-if="scope.row.orderStatus == 1">
                <div class="dian"></div>
                <div class="text">未发布</div>
              </div>
              <!-- HANG_UP( code: 2， info:"挂起")，PAYING( code: 3， info:"等待付款")PAID( code: 4，info:"已付款") -->
              <div class="tag waitDispatch" v-if="scope.row.orderStatus == 4 ||
                scope.row.orderStatus == 2 ||
                scope.row.orderStatus == 3
                ">
                <div class="dian"></div>
                <div class="text">未起运</div>
              </div>
              <div class="tag dispatched" v-if="scope.row.orderStatus == 5 || scope.row.orderStatus == 6">
                <!--  SHIPMENTING( code: 5,SHIPMENTED( code: 6info:"已发货")-->
                <div class="dian"></div>
                <div class="text">运输中</div>
              </div>
              <div class="tag dispatched" v-if="scope.row.orderStatus == 7">
                <div class="dian"></div>
                <!-- WAITING_PAY( code: 7，info:"等待到付") -->
                <div class="text">已送达</div>
              </div>
              <div class="tag dispatched" v-if="scope.row.orderStatus == 8 || scope.row.orderStatus == 9">
                <div class="dian"></div>
                <!-- TO_SIGN( code: 8，info:"待签收")，WAITING_RECEIPT( code: 9，info:"等待签收回单”) -->
                <div class="text">待签收</div>
              </div>
              <div class="tag complete" v-if="scope.row.orderStatus == 11 || scope.row.orderStatus == 10
                ">
                <div class="dian"></div>
                <!-- COMPLETED( code: 11， info:"已完成") code:10 已签收 -->
                <div class="text">已完成</div>
              </div>
              <div class="tag Canceled" v-if="scope.row.orderStatus == 12">
                <!-- CANCEL( code: 12， info:"订单取消"]; -->
                <div class="dian"></div>
                <div class="text">已取消</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="orderNo" label="订单编号"></el-table-column>
          <el-table-column align="left" prop="ownerName" label="货源方">
          </el-table-column>

          <el-table-column align="left" prop="supplierName" label="供应商名称">
          </el-table-column>
          <el-table-column align="left" prop="projectName" label="项目名称">
          </el-table-column>
          <!-- <el-table-column align="left" prop="customerName" label="下单人" width="120">
          </el-table-column> -->

          <el-table-column align="left" prop="fleetName" label="车队名称">
          </el-table-column>
          <el-table-column align="left" prop="customerName" label="创建人" width="120">
          </el-table-column>
          <el-table-column align="left" prop="createTime" label="创建时间" sortable width="165">
          </el-table-column>
          <el-table-column align="left" label="操作" width="105">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="small"
                  v-if="scope.row.orderStatus == 1 & permissions.updateOrderSelf.perms != null" @click="
                    $router.push({
                      path: '/supplierManagement/selfCreatedOrder',
                      query: { id: scope.row.orderId },
                    })
                    ">编辑</el-button>
                <el-button type="text" size="small" v-if="scope.row.orderStatus != 1" @click="
                  $router.push({
                    path: '/supplierManagement/assistcreatingOrderDetail',
                    query: { id: scope.row.orderId },
                  })
                  ">详情</el-button>
                <!--      <el-button type="text" size="small">更多</el-button> -->
                <el-button type="text" size="small" @click="DeleteItem(scope.row.orderId)" v-if="(scope.row.orderStatus == 4 ||
                  scope.row.orderStatus == 2 ||
                  scope.row.orderStatus == 3 ||
                  scope.row.orderStatus == 1) & permissions.cancelOrder.perms != null
                  ">取消</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination @current-change="changePages($event)" class="pagination" background layout="slot,prev, pager, next"
          :total="data.total * 1" :page-size="pageSize * 1" :pager-count="5">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ pageSize }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>
    <!-- <el-button
      type="text"
      size="small"
      @click="
        $router.push({
          path: '/home/selfOperatedOrder/list/details',
          query: { id: 16545 },
        })
      "
      >测试详情</el-button
    > -->
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb";
import httpApi from "@/http";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      isUnfold: false,
      supplierName: "", //接单人
      orderNo: "", //订单编号
      // startTime: "", //开始时间
      // endTime: "", //结束时间
      // customerName: "", //下单人
      ownerName: "", //货主名称
      orderStatus: "", //订单状态
      planName: "", //计划名称
      projectName: "", //项目名称
      fleetName: "",//车队名称
      createTime: "",

      /*      <el-option label="订单编号" value="orderNo"></el-option>
                  <el-option label="货主名称" value="ownerName"></el-option>
                  <el-option label="计划名称" value="planName"></el-option>
                  <el-option label="接单人" value="customerName"></el-option>
                  <el-option label="订单编号" value="orderNo"></el-option> */
      orderStateArr: [
        {
          value: "1,2,3,4",
          label: "未接单",
        },
        {
          value: "5,6",
          label: "运输中",
        },
        {
          value: "7",
          label: "已送达",
        },
        {
          value: "8,9",
          label: "待签收",
        },
        {
          value: "11",
          label: "已完成",
        },
        {
          value: "12",
          label: "已取消",
        },
      ],
      searchValue: "",

      searchArr: [
        { label: "订单编号", value: "orderNo" },
        { label: "货源方", value: "ownerName" },
        // { label: "计划名称", value: "planName" },
        { label: "项目名称", value: "projectName" },
        { label: "车队名称", value: "fleetName" },
        { label: "供应商名称", value: "supplierName" },
        // { label: "订单状态", value: "orderStatus" },
        // { label: "承运方", value: "supplierName" },
        // { label: "开始时间", value: "startTime" },
        // { label: "结束时间", value: "endTime" },
      ],
      operateValue: "",
      searchFrom: {},
      selectValue: "orderNo",

      data: {},
      records: [],
      options: [
        {
          value: "批量取消",
          label: "批量取消",
        },
      ],
      multipleSelection: [], //存放批量选择的订单
      selectionLegth: 0, //已选择几项
      operateValue: "",
      enterpriseName: "", //企业名称 值
      pageCurrent: "1", //当前页
      pageSize: "10", //每页10条
      permissions: {}
    };
  },
  created() {
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'))
  },
  methods: {
    // 一键发布
    async publish() {
      let cont = [];
      let Idmood = [];

      cont = this.$refs.registTable.selection;
      console.log("cont", cont);
      if (cont.length > 0) {
        cont.forEach((item, i) => {
          Idmood.push(item.orderId);
        });
        Idmood = Array.from(new Set(Idmood));
        Idmood = Idmood.join(",");
        let res = await this.$http.supplierManagementApi.releaseOrder({
          orderId: Idmood,
        });
        //console.log(res);
        if (res.data.code == 200) {
          this.$message.success("发布成功");
          this.getList();
        }
      } else {
        this.$message.warning("请选择发布项");
      }
    },
    clearUp() {
      (this.supplierName = ""), //承运方
        (this.orderNo = ""), //订单编号
        // (this.startTime = ""), //开始时间
        // (this.endTime = ""), //结束时间
        // (this.customerName = ""), //接单人
        (this.ownerName = ""), //货主名称
        (this.orderStatus = ""), //订单状态
        // (this.planName = ""), //计划名称
        (this.ownerName = ""), //货主名称
        (this.projectName = ""); //项目名称
      this.createTime = '',
        this.fleetName = '',
        this.searchValue = "";
      this.getList1();
    },
    changeUnfold() {
      this.isUnfold = !this.isUnfold;
    },
    changeSelect(val) {
      this.selectValue = val;
    },
    changeSearchValue(val) {
      this.searchValue = val;
    },
   

    getSerialNumber(arr) {
      // 前端解决序号
      arr.forEach((item, i) => {
        let num = i + 1 + Number(this.pageSize) * (this.pageCurrent - 1);
        item.SerialNumber = num;
      });
    },
	getList1(){
		this.pageCurrent = 1;
		this.getList();
	},
    getList() {
      let params = {};

      if (this.selectValue == "orderNo") {
        //console.log(this.searchValue);
        this.orderNo = this.searchValue;
      }
      this.searchArr.forEach(item=>{
        if(this.selectValue==item.value){
          this[item.value]=this.searchValue
          console.log(this[item.value]);
        }
      })

      console.log(this.createTime);


      params = {
        current: this.pageCurrent,
        size: this.pageSize,

        orderNo: this.orderNo,
        supplierName: this.supplierName, //供应商名称
        fleetName: this.fleetName,
        orderNo: this.orderNo, //订单编号
        startTime: this.createTime != null ? this.createTime[0] : '', //开始时间
        endTime: this.createTime != null ? this.createTime[1] : '', //结束时间
        // customerName: this.customerName, //下单人
        cargoName: this.ownerName, //货主名称
        orderStatus: this.orderStatus, //订单状态
        planName: this.planName, //计划名称
        ownerName: this.ownerName, //货主名称
        projectName: this.projectName, //项目名称
      };
      console.log(params);
      httpApi.supplierManagementApi.getOrderList(params).then((res) => {
        //console.log("列表", res);
        this.records = res.data.data.records;

        this.data = res.data.data;
        this.getSerialNumber(this.records);

        //console.log(res.data.data.records);
      });
    },
    // 列表数据选择变化时
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let supplierIdArr = [];
      //数组转字符串
      this.multipleSelection.forEach((item) => {
        supplierIdArr.push(item.orderId);
      });
      this.multipleSelection = supplierIdArr.join(",");
      this.selectionLegth = supplierIdArr.length;
      //console.log("批量选择", this.multipleSelection);
    },

    BatchOperation(val) {
      //console.log(val);
      if (val == "批量取消") {
        this.$confirm("此操作将批量取消运单, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 发起批量删除请求
            if (this.multipleSelection != "") {
              let params = {
                orderId: this.multipleSelection,
              };
              console.log("批量取消传参", params);
              httpApi.supplierManagementApi.orderCancel(params).then((res) => {
                //console.log("批量取消", res);
                if (res.data.code == 200) {
                  this.getList(); //删除后 更新列表数据
                  this.$message({
                    type: "success",
                    message: "批量取消运单成功!",
                  });
                }
              });
            } else if (this.multipleSelection == "") {
              this.$message.warning("请选择取消项");
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
        this.operateValue = "批量操作"; //重置
      }
    },
    DeleteItem(orderId) {
      this.$confirm("此操作将取消运单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 发起单个删除请求
          httpApi.supplierManagementApi
            .orderCancel({ orderId: orderId })
            .then((res) => {
              //console.log("取消结果", res);
              if (res.data.code == 200) {
                this.getList();
                //删除后 更新列表数据
                this.$message({
                  type: "success",
                  message: "取消成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "取消失败!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    CleanUp() {
      this.enterpriseName = "";
      this.getList();
    },
    changePages(val) {
      //页码变化时
      this.pageCurrent = val.toString();
      this.getList();
    },
     // 记录滚动距离
     scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
    },
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.registTable.bodyWrapper.addEventListener('scroll',this.scrollEvent,false)
    // 激活设置滚动位置
    this.$refs.registTable.bodyWrapper.scrollTop=this.$route.meta.scrollTop 
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.registTable.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },
  mounted() {
    this.getList();
  },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
.header {
  background-color: #ffffff;
  align-items: center;
  padding: 0 30px;
  margin-bottom: 8px;

  .searchBox {
    height: 76px;
    display: flex;
    align-items: center;

    ::v-deep .el-input__inner {
      height: 32px;
      line-height: 32px;
      padding: 10px 9px 9px;
    }

    ::v-deep .el-input__icon {
      line-height: 0;
    }

    ::v-deep .el-input-group__append {
      border: none;
    }

    .selectType {
      width: 90px;
      height: 32px;
      color: #262626;
      font-size: 12px;
      background-color: #ffffff;

      ::v-deep .el-input-group__prepend {
        height: 32px !important;
      }

      ::v-deep .el-input__inner {
        height: 30px;
        line-height: 30px;
        height: 32px;
        padding: 10px 9px 9px;
        //border-bottom: 1px solid #f0f0f0;
      }

      ::v-deep .el-input__inner {
        border: 1px solid #f0f0f0;
      }
    }

    .searchInput {
      width: 480px;
      height: 32px;
    }

    .searchBtn {
      background-color: #1890ff;
      color: #ffffff;
      font-size: 12px;
      width: 80px;
      height: 32px;
      border-radius: 0;
    }

    .zankai {
      color: #1890ff;
      font-size: 12px;
      margin-left: 19px;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
        transition: 0.2s;
      }

      .UnfoldActive {
        transition: 0.3s;
        transform: rotateZ(180deg);
      }

      .el-icon-arrow-right {
        color: #1890ff;
        font-size: 12px;
      }
    }
  }

  .zankai_area {
    width: 100%;

    .inputBox {
      display: flex;
      margin-bottom: 16px;

      ::v-deep .el-input__inner {
        height: 32px;
        line-height: 32px;
        padding: 0 10px;
      }

      .label {
        font-size: 12px;
        width: 72px;
        line-height: 32px;
        height: 32px;
        text-align: right;
        color: #262626;
        margin-right: 8px;
      }

      .input {
        height: 32px;
        width: 225px;
        border-radius: 4px;
        border: 1px solid #f0f0f0;
        padding: 0 10px;
        font-size: 12px;

        &:focus {
          border: 1px solid #1890ff;
        }
      }

      .orderSelector {
        width: 225px;

        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      .datePicker {
        ::v-deep .el-input__icon {
          display: none;
        }
      }
    }
  }
}

.main {
  background-color: #fff;
  // 64 + 76 +14+17 +16+8 =171
  height: calc(100vh - 243px);
  width: 100%;

  .main_head {
    padding: 0 30px 0 29px;
    display: flex;
    justify-content: space-between;
    height: 64px;
    align-items: center;

    .main_head_left {
      font-size: 12px;
      color: #262626;
    }

    .main_head_right {
      .addCargoOwner {
        background-color: #1890ff;
        border-radius: 4px;
        height: 32px;
        color: #ffffff;
        font-size: 12px;
        padding: 8px 17px 9px 17px;
        transition: 0.2s;
        cursor: pointer;
        margin-right: 17px;

        .iconBtn {
          margin-right: 7px;
          font-size: 15px;
        }

        &:hover {
          opacity: 0.8;
        }
      }

      .selector {
        width: 105px;
        height: 32px;
        color: #262626;
        font-size: 12px;
      }
    }
  }
}

.list {
  height: calc(100% - 82px);
  padding: 0 30px;

  ::v-deep .el-table__body-wrapper {
    height: calc(100vh - 372px) !important;
    overflow-y: scroll;
  }

  // 表头样式
  ::v-deep .el-table__header th {
    background-color: #f0f6fd;
    color: #262626;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    height: 48px;
    padding: 0;

    // 表 body的td
    ::v-deep .el-table__body td {
      color: #595959;
      font-size: 12px;
    }
  }
}

.tag {
  width: 63px;
  height: 28px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;

  .dian {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-right: 4px;
  }

  // 待派车标签 样式
  &.waitDispatch {
    background-color: #fffce8;
    color: #f9aa0d;

    .dian {
      background-color: #f9aa0d;
    }
  }

  &.gery {
    background-color: #f7f8f8;
    color: #a8b0b6;

    .dian {
      background-color: #a8b0b6;
    }
  }

  //已派车 和运输中 样式
  &.dispatched {
    background-color: #ecf5fe;
    color: #1890ff;

    .dian {
      background-color: #1890ff;
    }
  }

  //已完成
  &.complete {
    background-color: #ebfef5;
    color: #1acb7a;

    .dian {
      background-color: #1acb7a;
    }
  }

  //已取消
  &.Canceled {
    background-color: #fde8e9;
    color: #f5222d;

    .dian {
      background-color: #f5222d;
    }
  }
}

.paginationBox {
  width: 100%;
  background-color: #fff;
  display: flex;
  height: 48px;
  align-items: center;
  border-top: 1px solid #F0F0F0;

  .pagination {
    margin-left: auto;
    margin-right: 30px;
  }
}
</style>
